import { reactive, ref, } from 'vue'
export interface ITextCell {
    text: string;
    class: string[];
    index: number;
}

export default class SelectText {
    private env: HTMLDivElement;
    private txt: string;
    private ctx: Selection;
    private childrens: Element[]
    public data: ITextCell[] = []
    constructor(env: HTMLDivElement, txt: string) {
        this.env = env;
        this.txt = txt;
        this.childrens = [...this.env.children]
        this.ctx = window.getSelection()!;
        this.buildAppropriateData();
    }

    public buildRangeContent() {
        const firstSpanEl = this.ctx.anchorNode?.parentElement
        const lastSpanEl = this.ctx.focusNode?.parentElement
        const firstIndex = this.childrens.findIndex(v => v === firstSpanEl)
        const lastSpanIndex = this.childrens.findIndex(v => v === lastSpanEl)
        return {
            start: firstIndex,
            last: lastSpanIndex,
            startEl: firstSpanEl,
            endEl: lastSpanEl,
            txt: this.ctx.toString(),
        }
    }

    public displayBackground() {
        this.data.unshift({
            text:"123",
            index:100,
            class:['123123']
        })
    }

    private buildAppropriateData() {
        this.data = this.txt.split("").map((v, index) => ({
            text: v,
            index,
            class: ["base"],
        }))
    }
    
    public get selection() {
        return this.ctx;
    }
    public get content() {
        return this.buildRangeContent()
    }
}